/*
 * @Description: 按钮组件
 * @Author: ziwei.ma
 * @Date: 2019-07-24 16:13:34
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-05 12:52:53
 */
<template>
  <div class="btn-warpper flex-h flex-hc flex-hsb">
    <template v-for="(option,index) in orderDetailInfo.btnList">
      <component
        :is="getComponent(option)"
        :key="'btn' + index"
        :isDetail="true"
        :orderNo="orderDetailInfo.orderNo"
        :payment="orderDetailInfo.payment"
        :outOrderNo="orderDetailInfo.outOrderNo"
        :tag="tag"
        pageType="TYPE_CUSTOM"
      />
    </template>
  </div>
</template>

<script>
import payBtn from '../../btnsComponent/payBtn'
import cancleBtn from '../../btnsComponent/cancleBtn'
import deleteBtn from '../../btnsComponent/deleteBtn'
// 按钮
const CANCLE_BTN = 2 // 取消订单
const PAY_BTN = 1 // 立即付款
const DELETE_BTN = 15 // 删除订单

export default {
  props: {
    orderDetailInfo: {
      type: Object,
      default: null
    }
  },
  components: {
    'pay-btn': payBtn,
    'cancle-btn': cancleBtn,
    'delete-btn': deleteBtn
  },
  data() {
    return {
      tag: 2
    }
  },
  methods: {
    // 动态加载组件
    getComponent(type) {
      switch (type) {
        case CANCLE_BTN:
          return 'cancle-btn'
        case PAY_BTN:
          return 'pay-btn'
        case DELETE_BTN:
          return 'delete-btn'
      }
    }
  }
}
</script>

<style scoped>
.btn-warpper {
  margin-top: 64px;
  box-sizing: border-box;
}
.public-style {
  text-align: center;
  width: 240px;
  height: 64px;
  line-height: 64px;
  border-radius: 32px;
  margin: 0 30px;
}
.cancel-btn {
  background-color: #fff;
  color: #333333;
}
.pay-btn {
  color: #fff;
}
.delete-btn {
  text-align: center;
  height: 72px;
  line-height: 72px;
  background: linear-gradient(
    90deg,
    rgba(39, 132, 255, 1) 0%,
    rgba(78, 129, 250, 1) 100%
  );
  border-radius: 36px;
}
</style>
